<template>
	<view>
		<swiper :vertical="true" class="ss">
			<swiper-item>
				<!-- <view class="s">A</view> -->
				<view class="page1">
					<image mode="aspectFit" style="width:220rpx;" src="http://mlzboy.gitee.io/ganpei_site/%E6%B5%99%E6%B1%9F%E7%9C%81%E9%AB%98%E6%A0%A1%E6%95%99%E5%B8%88%E8%B5%84%E6%A0%BC%E8%AF%81%E5%B2%97%E5%89%8D%E5%9F%B9%E8%AE%AD2.png"></image>
					<view class="title">浙江省高校青年教师岗前培训</view>
					<view class="title">简称:省岗培</view>
					<view class="btn">立即打开</view>
					<view class="part" :animation="animationData">
						<view class="micons-com icon-slidedown"></view>
						<view class="downtxt">向下滑动</view>
					</view>
					<view class="row">
						<view style="margin-left:50rpx">copyright@2022</view>
						<view style="margin-right:50rpx;color:#00cdff">PC版</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="page2">
<!-- 					<view style="padding:5rpx 0rpx;width:100%;height:24px;background: #FFF;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
					<image style="background: #FFF;wdith:172px;height:24px;border:#273ed1 solid 0px;margin-left:-40rpx;"src="../../static/mobilecommon.png" mode="aspectFit"></image>
					</view> -->
					<view style="backgroud:#FFF;background-color:#FFF;width:100%;height:44px;paddding:10rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
					<image src="../../static/新图标.png" style="width:172px;height:24px;margin-left: 20rpx;margin-top: 20rpx;"></image>
					</view>
					<view class="row1">
						<view style="color:#a1bef3;margin-top:120rpx;margin-left:60rpx">
							<view class="cur">01</view>
							<view class="cur2">02</view>
							<view class="cur2">03</view>
							<view class="cur2">04</view>
							<view class="cur2">05</view>
							<view class="cur2">06</view>
							<view class="cur2">07</view>
							<view class="cur2">08</view>
						</view>
						<!-- <image src="../../static/0.png" mode="aspectFit" style="width:288px;height:514px;margin-top:120rpx"></image> -->
						<image src="../../static/高亮.png" mode="aspectFit" style="width:320px;height:571px;margin-top:120rpx"></image>
					</view>
					<view class="part2">
						<view class="part2_title">搜索高亮</view>
						<view class="part2_desc">长按选项或标题可以直接以该选项或标题进行检索</view>
						<view class="part2_line"></view>
						<view class="part2_row" :animation="animationData2">
							<view class="micons-com slidearrow icon-downwhite"></view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="page2">
<!-- 					<view style="padding:5rpx 0rpx;width:100%;height:80rpx;background: #FFF;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
					<image style="background: #FFF;height:60rpx;border:#273ed1 solid 0px;padding:10rpx 0;"src="../../static/mobilecommon.png" mode="aspectFit"></image>
					</view> -->
					<view style="backgroud:#FFF;background-color:#FFF;width:100%;height:44px;paddding:10rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
					<image src="../../static/新图标.png" style="width:172px;height:24px;margin-left: 20rpx;margin-top: 20rpx;"></image>
					</view>
					<view class="row1">
						<view style="color:#a1bef3;margin-top:120rpx;margin-left:60rpx">
							<view class="cur2">01</view>
							<view class="cur">02</view>
							<view class="cur2">03</view>
							<view class="cur2">04</view>
							<view class="cur2">05</view>
							<view class="cur2">06</view>
							<view class="cur2">07</view>
							<view class="cur2">08</view>
						</view>
						<!-- <image src="../../static/0.png" mode="aspectFit" style="width:288px;height:514px;margin-top:120rpx"></image> -->
						<image src="../../static/错题集.png" mode="aspectFit" style="width:320px;height:571px;margin-top:120rpx"></image>
					</view>
					<view class="part2">
						<view class="part2_title">错题集</view>
						<view class="part2_desc">使用官方题库进行模拟答卷的错题会自动归集到错题集中方便集中复习</view>
						<view class="part2_line"></view>
						<view class="part2_row" :animation="animationData2">
							<view class="micons-com slidearrow icon-downwhite"></view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="page2">
<!-- 					<view style="padding:5rpx 0rpx;width:100%;height:80rpx;background: #FFF;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
					<image style="background: #FFF;height:60rpx;border:#273ed1 solid 0px;padding:10rpx 0;"src="../../static/mobilecommon.png" mode="aspectFit"></image>
					</view> -->
					<view style="backgroud:#FFF;background-color:#FFF;width:100%;height:44px;paddding:10rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
					<image src="../../static/新图标.png" style="width:172px;height:24px;margin-left: 20rpx;margin-top: 20rpx;"></image>
					</view>
					<view class="row1">
						<view style="color:#a1bef3;margin-top:120rpx;margin-left:60rpx">
							<view class="cur2">01</view>
							<view class="cur2">02</view>
							<view class="cur">03</view>
							<view class="cur2">04</view>
							<view class="cur2">05</view>
							<view class="cur2">06</view>
							<view class="cur2">07</view>
							<view class="cur2">08</view>
						</view>
						<!-- <image src="../../static/0.png" mode="aspectFit" style="width:288px;height:514px;margin-top:120rpx"></image> -->
						<image src="../../static/学时.png" mode="aspectFit" style="width:320px;height:571px;margin-top:120rpx"></image>
					</view>
					<view class="part2">
						<view class="part2_title">继续教育学时</view>
						<view class="part2_desc">统计每门课花费的学习时长，并可出具继续教育学时证明</view>
						<view class="part2_line"></view>
					</view>

				</view>
			</swiper-item>
			<swiper-item>
				<view class="page2">
<!-- 					<view style="padding:5rpx 0rpx;width:100%;height:80rpx;background: #FFF;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
					<image style="background: #FFF;height:60rpx;border:#273ed1 solid 0px;padding:10rpx 0;"src="../../static/mobilecommon.png" mode="aspectFit"></image>
					</view> -->
					<view style="backgroud:#FFF;background-color:#FFF;width:100%;height:44px;paddding:10rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
					<image src="../../static/新图标.png" style="width:172px;height:24px;margin-left: 20rpx;margin-top: 20rpx;"></image>
					</view>
					<view class="row1">
									<view style="color:#a1bef3;margin-top:120rpx;margin-left:60rpx">
										<view class="cur2">01</view>
										<view class="cur2">02</view>
										<view class="cur2">03</view>
										<view class="cur">04</view>
										<view class="cur2">05</view>
										<view class="cur2">06</view>
										<view class="cur2">07</view>
										<view class="cur2">08</view>
									</view>
									<!-- <image src="../../static/0.png" mode="aspectFit" style="width:288px;height:514px;margin-top:120rpx"></image> -->
									<image src="../../static/ipad.png" mode="aspectFit" style="width:310px;height:790px;margin-top:90rpx;margin-left: 10px;"></image>
								</view>
								<view class="part2">
									<view class="part2_title">全真考场模拟</view>
									<view class="part2_desc">使用iPad横屏可以获得更好的呈现效果</view>
									<view class="part2_line"></view>
									<view class="part2_row" :animation="animationData2">
										<view class="micons-com slidearrow icon-downwhite"></view>
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
										<view class="page2">
						<!-- 					<view style="padding:5rpx 0rpx;width:100%;height:80rpx;background: #FFF;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
											<image style="background: #FFF;height:60rpx;border:#273ed1 solid 0px;padding:10rpx 0;"src="../../static/mobilecommon.png" mode="aspectFit"></image>
											</view> -->
											<view style="backgroud:#FFF;background-color:#FFF;width:100%;height:44px;paddding:10rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
											<image src="../../static/新图标.png" style="width:172px;height:24px;margin-left: 20rpx;margin-top: 20rpx;"></image>
											</view>
											<view class="row1">
												<view style="color:#a1bef3;margin-top:120rpx;margin-left:60rpx">
													<view class="cur2">01</view>
													<view class="cur2">02</view>
													<view class="cur2">03</view>
													<view class="cur2">04</view>
													<view class="cur">05</view>
													<view class="cur2">06</view>
													<view class="cur2">07</view>
													<view class="cur2">08</view>
												</view>
												<!-- <image src="../../static/0.png" mode="aspectFit" style="width:288px;height:514px;margin-top:120rpx"></image> -->
												<image src="../../static/纸质题库.png" mode="aspectFit" style="width:320px;height:700px;margin-top:120rpx"></image>
											</view>
											<view class="part2">
												<view class="part2_title">纸质题库</view>
												<view class="part2_desc">告别眼干、眼涩</view>
												<view class="part2_line"></view>
												<view class="part2_row" :animation="animationData2">
													<view class="micons-com slidearrow icon-downwhite"></view>
												</view>
											</view>
										</view>
									</swiper-item>
									<swiper-item>
													<view class="page2">
									<!-- 					<view style="padding:5rpx 0rpx;width:100%;height:80rpx;background: #FFF;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
														<image style="background: #FFF;height:60rpx;border:#273ed1 solid 0px;padding:10rpx 0;"src="../../static/mobilecommon.png" mode="aspectFit"></image>
														</view> -->
														<view style="backgroud:#FFF;background-color:#FFF;width:100%;height:44px;paddding:10rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
														<image src="../../static/新图标.png" style="width:172px;height:24px;margin-left: 20rpx;margin-top: 20rpx;"></image>
														</view>
														<view class="row1">
															<view style="color:#a1bef3;margin-top:120rpx;margin-left:60rpx">
																<view class="cur2">01</view>
																<view class="cur2">02</view>
																<view class="cur2">03</view>
																<view class="cur2">04</view>
																<view class="cur2">05</view>
																<view class="cur">06</view>
																<view class="cur2">07</view>
																<view class="cur2">08</view>
															</view>
															<!-- <image src="../../static/0.png" mode="aspectFit" style="width:288px;height:514px;margin-top:120rpx"></image> -->
															<image src="../../static/题量分布.png" mode="aspectFit" style="width:300px;height:830px;margin-top:120rpx;margin-left: 12px;"></image>
														</view>
														<view class="part2">
															<view class="part2_title">题量分布</view>
															<view class="part2_desc">课程难易程度一目了然</view>
															<view class="part2_line"></view>
															<view class="part2_row" :animation="animationData2">
																<view class="micons-com slidearrow icon-downwhite"></view>
															</view>
														</view>
													</view>
												</swiper-item>
												<swiper-item>
																<view class="page2">
												<!-- 					<view style="padding:5rpx 0rpx;width:100%;height:80rpx;background: #FFF;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
																	<image style="background: #FFF;height:60rpx;border:#273ed1 solid 0px;padding:10rpx 0;"src="../../static/mobilecommon.png" mode="aspectFit"></image>
																	</view> -->
																	<view style="backgroud:#FFF;background-color:#FFF;width:100%;height:44px;paddding:10rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
																	<image src="../../static/新图标.png" style="width:172px;height:24px;margin-left: 20rpx;margin-top: 20rpx;"></image>
																	</view>
																	<view class="row1">
																		<view style="color:#a1bef3;margin-top:120rpx;margin-left:60rpx">
																			<view class="cur2">01</view>
																			<view class="cur2">02</view>
																			<view class="cur2">03</view>
																			<view class="cur2">04</view>
																			<view class="cur2">05</view>
																			<view class="cur2">06</view>
																			<view class="cur">07</view>
																			<view class="cur2">08</view>
																		</view>
																		<!-- <image src="../../static/0.png" mode="aspectFit" style="width:288px;height:514px;margin-top:120rpx"></image> -->
																		<image src="../../static/会员权益.png" mode="aspectFit" style="width:290px;height:630px;margin-top:120rpx;margin-left:35rpx;"></image>
																	</view>
																	<view class="part2">
																		<view class="part2_title">会员权益</view>
																		<view class="part2_desc">花钱买时间，物有所值，超预期</view>
																		<view class="part2_line"></view>
																		<view class="part2_row" :animation="animationData2">
																			<view class="micons-com slidearrow icon-downwhite"></view>
																		</view>
																	</view>
																</view>
															</swiper-item>
																					<swiper-item>
																									<view class="page2">
																					<!-- 					<view style="padding:5rpx 0rpx;width:100%;height:80rpx;background: #FFF;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
																										<image style="background: #FFF;height:60rpx;border:#273ed1 solid 0px;padding:10rpx 0;"src="../../static/mobilecommon.png" mode="aspectFit"></image>
																										</view> -->
																										<view style="backgroud:#FFF;background-color:#FFF;width:100%;height:44px;paddding:10rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
																										<image src="../../static/新图标.png" style="width:172px;height:24px;margin-left: 30rpx;margin-top: 20rpx;"></image>
																										</view>
																										<view class="row1">
																											<view style="color:#a1bef3;margin-top:120rpx;margin-left:60rpx">
																												<view class="cur2">01</view>
																												<view class="cur2">02</view>
																												<view class="cur2">03</view>
																												<view class="cur2">04</view>
																												<view class="cur2">05</view>
																												<view class="cur2">06</view>
																												<view class="cur2">07</view>
																												<view class="cur">08</view>
																											</view>
																											<!-- <image src="../../static/0.png" mode="aspectFit" style="width:288px;height:514px;margin-top:120rpx"></image> -->
																											<image src="../../static/小程序二维码.png" mode="aspectFit" style="width:300px;height:630px;margin-top:120rpx;margin-left: 30rpx;"></image>
																										</view>
																										<view class="part2">
																											<view class="part2_title">微信小程序</view>
																											<view class="part2_desc">扫一扫</view>
																											<view class="part2_line"></view>
																											<view class="part2_row" :animation="animationData2">
																												<view class="micons-com slidearrow icon-downwhite"></view>
																											</view>
																										</view>
																									</view>
																								</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				animation:null,
				animation2:null,
				animationData: {},
				animationData2: {},
				title: 'Hello'
			}
		},
		  onShow: function(){

			const that = this
		   //  setTimeout(function() {
		   //    // animation.translate(30).step()
		   //    // this.animationData = animation.export()
			  
		   //  }.bind(this), 2000)
		   
		   setTimeout(()=>{
			   that.startAni();
			   that.loopAni();
		   },1000)
		   
		   setTimeout(()=>{
		   			   that.startAni2();
		   			   that.loopAni2();
		   },1000)
		   
		  },
		onLoad() {
			
			
/**********************************************/			
if (navigator.userAgent.indexOf('obile')>-1) {  
    // alert('移动端')  
}
else{
	window.location.href='#/pages/pc/pc'
}
/*********************************************/




		},
		methods: {
			startAni:function(){
				var animation = uni.createAnimation({
				  duration: 2000,
				  timingFunction: 'ease-in-out',
				})
						
				this.animation = animation
						
				animation.translateY(20).opacity(1).step({duration:2000})
				animation.translateY(-20).opacity(0).step({duration:2000})
						
				this.animationData = animation.export()
			},
			loopAni:function(){
				 const that = this
				 let timer = null
				 clearInterval(timer)
				 timer = setInterval(()=>{
					 that.startAni()
					 
				 },3000)
			},
			startAni2:function(){
				var animation = uni.createAnimation({
				  duration: 2000,
				  timingFunction: 'ease-in-out',
				})
						
				this.animation2 = animation
						
				animation.translateY(20).opacity(1).step({duration:2000})
				animation.translateY(-20).opacity(0).step({duration:2000})
						
				this.animationData2 = animation.export()
			},
			loopAni2:function(){
				 const that = this
				 let timer = null
				 clearInterval(timer)
				 timer = setInterval(()=>{
					 that.startAni2()
					 
				 },3000)
			}
		}
	}
</script>

<style>
	.icon-downwhite {
	    background-position: 0 -57px;
	    width: 24px;
	    height: 24px;
	}
	.slidearrow{
	    /* position: absolute; */
	    bottom: 12px;
	    margin-left: -12px;
	}
	.part2_line{
		/* color:#FFF; */
		margin:25rpx 0 0 60rpx;
		width: 100rpx;
		height: 7rpx;
		background: #FFF;
	}
	.cur{
		border-left: 3px solid #0032be;
		font-weight:100;
		width:35px;
		height:16px;
		line-height:16px;
		color:#FFF;
		margin-bottom:50rpx;
		padding:2rpx;
		background: #0064ff;
		font-size:16px;
		text-align:right;
		vertical-align: center;
	}
	.cur2{
		border-left: 3px solid #004fde;
		font-weight:100;
		width:35px;
		height:16px;
		line-height:16px;
		/* color:#FFF; */
		margin-bottom:50rpx;
		padding:2rpx;
		background: #0064ff;
		font-size:16px;
		text-align:right;
		vertical-align: center;
	}
/* 	.fadeOutUp {
	    margin-top: 32px;
		-webkit-animation: fadeOutUp 2s ease-in-out infinite;
	    animation: fadeOutUp 2s ease-in-out infinite;
	} */
	.part2_row{
		/* margin-top:-100rpx; */
		/* width:100%; */
		display: flex;
		flex-direction: row;
		justify-content:center;
	}
	.row{
		width:100%;
		position: fixed;
		/* padding:0 40rpx; */
		/* border:1rpx solid red; */
		width:100%;
		display: flex;
		flex-direction: row;
		/* align-items: center; */
		justify-content: space-between;
		color:#FFF;
		font-size: 25rpx;
		bottom:40rpx;
		right:0;
	}
	
	.part{
		/* margin-top: 50rpx; */
		/* -webkit-animation: fadeOutUp 2s ease-in-out infinite; */
		/* animation:2s ease-in-out infinite; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}
	.downtxt {
		margin-top: 22rpx;
	    color: #fff;
		opacity:0.75;
	    font-size: 12px;
	    /* margin-top: 4px; */
	    height: 17px;
	}
	.micons-com {
	    background-image: url(http://mat1.gtimg.com/ipad/downapp2019/mobilecommon-1.png);
	    background-image: -webkit-image-set(url(http://mat1.gtimg.com/ipad/downapp2019/mobilecommon_2x.png) 2x);
	    background-repeat: no-repeat;
	    display: inline-block;
	}
	.icon-slidedown {
	    background-position: -111px -29px;
	    width: 18px;
	    height: 27px;
	}
	.btn{
		margin-top:360rpx;
		margin-bottom: 50rpx;
		width: 294px;
		    height: 52px;
		    background: #fff;
		    border-radius: 26px;
		    display: inline-block;
		    font-size: 0;
		    position: relative;
		    z-index: 5;
		    background-image: url(/static/open.png);
		    background-position: 50%;
		    background-repeat: no-repeat;
		    background-size: 89px 20px;
	}
	.title{
		color: #FFF;
		font-size:50rpx;
	}
	.page1{
		/* margin-top: 50rpx; */
		/* border:1px yellow solid; */
		width:100%;
		height:100%;
		display: flex;
		flex-direction: column;
		justify-content:flex-start;
		align-items: center;
/* 		background-image: url("@/static/background-image.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; */


    background: linear-gradient(#3687f0,#273ed1);
    overflow: hidden;
    background: #004fde;
    background-image: url("@/static/background-image.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0 292px;

	}
	.page2{
	display: flex;
			flex-direction: column;
			justify-content:flex-start;
			align-items: center;
	/* 		background-image: url("@/static/background-image.png");
			background-repeat: no-repeat;
			background-size: 100% 100%; */
	
	width:100%;
	height:100%;
	    background: linear-gradient(#3687f0,#273ed1);
	    overflow: hidden;
	    background: #004fde;
	    background-image: url("@/static/background-image.png");
	    background-size: 100%;
	    background-repeat: no-repeat;
	    background-position: 0 292px;	
	}
	.row1{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.part2{
		color:#FFF;
		position:absolute;
		bottom: 0;
		right:0;
		width:100%;
		height:37%;
		    background-image: url("../../static/background-text.png");
		    background-size: 100%;
	}
	.part2_title{
		margin:120rpx 60rpx 0 60rpx;
		font-weight: normal;
		font-size: 36rpx;
		font-style: italic;
	}
	.part2_desc{
		width:480rpx;
		line-height: 40rpx;
		margin:20rpx 60rpx 0 60rpx;
	}
/* 	uni-page-head {
	  display: none;
	} */
	.ss{width:100%;
	/* height:100%; */
	height:100vh;
	}
	.s{
		border:solid 1px red;
		width:100%;
		height:100%;
	}



</style>
